<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增</title>
    <link rel="stylesheet" th:href="@{/adminStatic/layui/css/layui.css}">
    <script th:src="@{/webjars/layui/2.5.6/layui.js}" src="" type="text/javascript"></script>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.js}" src="" type="text/javascript"></script>
    <style>
        html {
            height: 100%;
        }

        .layui-form-pane .layui-form-text .layui-textarea {
            min-height: 80px;
            max-height: 80px;
        }

        .div_show {
            transform: translate(-2000px);
            transition: all 0.8s;
        }

        .div_hide {
            transform: translate(2000px);
            transition: all 1.5s;
        }

        .photo-viewer {
            margin: 50px 0;
            text-align: center;
        }

        .img-reveal {
            display: inline-block;
            margin: 0px 8px;
        }

        .layui-btn {
            height: 34px;
            line-height: 34px;
        }
        .layui-form-select dl {
            max-height: 195px;
        }
    </style>
</head>
<body style="height: 100%;padding: 15px;box-sizing: border-box">

<form class="layui-form layui-form-pane form-info addForm" action="" th:add-url="${addUrl}">
    <div id="product_info" style="width:100%">
        <!-- 车位类型 -->
        <div class="layui-form-item">
            <label class="layui-form-label">车位类型</label>
            <div class="layui-input-inline" lay-verify="required" >
                <select name="carParkType" id="carParkType" lay-verify="required" lay-search disabled>
                    <option value="">请选择车位类型 (必填)</option>
                    <option value="地下停车位" th:selected="${obj.carParkType == '地下停车位'}">地下停车位</option>
                    <option value="地面停车位" th:selected="${obj.carParkType == '地面停车位'}">地面停车位</option>
                </select>
            </div>
        </div>
        <!-- 业主名 -->
        <div class="layui-form-item">
            <label class="layui-form-label">业主名</label>
            <div class="layui-input-inline" lay-verify="required" >
                <input class="layui-input" autocomplete="off" placeholder="请填写业主名 (选填如售出则必填)"
                       name="ownerName" th:value="${userInfo.userName}" readonly>
            </div>
        </div>
        <!-- 联系电话 -->
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="required" placeholder="请填写联系电话 (选填如售出则必填)" autocomplete="off"
                       class="layui-input" th:value="${userInfo.phone}" readonly>
            </div>
        </div>
        <!-- 是否售出 -->
        <div class="layui-form-item">
            <label class="layui-form-label">是否售出</label>
            <div class="layui-input-inline">
                <input type="radio" name="parkState" value="0" title="未售出" disabled>
                <input type="radio" name="parkState" value="1" title="已售出" checked disabled>
            </div>
        </div>
    </div>

    <input type="hidden" name="id" th:value="${obj.id}">

    <div class="content-input" style="position: absolute; left: 15px; bottom: 15px;">
        <input type="button" value="确认购买" name="submit" class="layui-btn addBtn layui-btn-normal">
    </div>
</form>


<script>
    layui.use(['form', 'upload', 'laydate'], function () {
        var layer = layui.layer
            , laydate = layui.laydate
            , form = layui.form;

        var lock = true;

        /**
         * 绑定回车事件
         */
        $(document).keypress(function (e) {
            //如果当前有类似layer.alert的窗体，点击最上层的确定按钮，并且取消所有焦点
            if ($('.layui-layer-btn0').length > 0) {
                $('.layui-layer-btn0').eq($('.layui-layer-btn0').length - 1)[0].click();
                $("*").blur();
            }
        });

        /**
         * 单击提交事件
         */
        $(".addBtn").click(function () {
            if (lock) {      //判断是否重复提交
                lock = true;
                //验证数据
                var flag = isVerifyDate();
                // 如果flag不为空就是验证不通过
                if(flag) {
                    layer.confirm(flag, {
                        btn: ['确定']  //按钮
                        , icon: 5
                        , anim: 6
                    });
                    return;
                }
                //获取表单数据
                var addData = $(".addForm").serializeArray();
                //获取提交的url
                var url = $(".addForm").attr("add-url");
                // 将数据转换为对象, 注意发送时将对象转为JSON字符串
                var jsonObj={};
                $(addData).each(function(){
                    jsonObj[this.name] = this.value;
                });
                // 将车位状态改为已出售
                // 因为单选按钮被禁用所以 serializeArray() 无法获取到单选按钮上的value， 需要手动将信息加入要更新的参数中
                jsonObj['parkState'] = '1';
                $.ajax({
                    url: url,
                    type: 'PUT',
                    async: false,
                    contentType : 'application/json;charset=utf-8', //设置请求头信息
                    data: JSON.stringify(jsonObj),
                    success: function(rollData) {
                        if (rollData.code == "0") {
                            layer.confirm(rollData.msg, {
                                btn: ['确定']  //按钮
                                , icon: 6
                            }, function () {
                                window.parent.location.reload();    //刷新父页面
                            });
                        } else {
                            layer.confirm(rollData.msg, {
                                btn: ['确定']  //按钮
                                , icon: 5
                                , anim: 6
                            }, function (index) {
                                lock = true;
                                layer.close(index);
                            });
                        }
                    },
                    error: function(res) {
                        layer.confirm('啊哦！访问出问题了！快找开发狗算账！', {
                            btn: ['确定']  //按钮
                            , icon: 5
                            , anim: 6
                        }, function (index) {
                            lock = true;
                            layer.close(index);
                        });
                    }
                })
            }
        });

        /**
         * 验证数据方法
         */
        function isVerifyDate() {
            // 获取所有数据
            var carParkType = $("select[name='carParkType']").val();
            var phone = $("input[name='phone']").val();
            var ownerName = $("input[name='ownerName']").val();
            var parkState = $("input[name='parkState']:checked").val();
            // 手机号正则
            var rePhone = /^1[3456789]\d{9}$/;
            // 非空验证
            if(!carParkType) {
                return "请认真点, 将所有必填数据填写完整! ";
            }
            // 如果是已售出， 必须填写业主和联系电话
            if(parkState == 1) {
                if(!ownerName || !phone) {
                    return "请认真点, 将所有必填数据填写完整! ";
                }
                if(!rePhone.test(phone)) {
                    return "手机号格式有误! ";
                }
            } else if(parkState == 0) {
                if(ownerName || phone) {
                    return "该车位还未售出! 不可填写业主信息! ";
                }
            }
        }
    });
</script>
</body>
</html>